<div class="loding_context" *ngIf="loading" id="loding_context"></div>
<div class="modal fade" data-backdrop="static" id="ReferenceIndexing">
  <div class="modal-dialog modal-dialog-centered" style="max-width: 1500px;">
    <div class="modal-content">
      <!-- 模态框头部 -->
      <div class="modal-header">
        <h4 class="modal-title">参考标引</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <!-- 模态框主体 -->
      <div class="modal-body">
        <div class="PI-keyWordBox02" style="max-height: 850px;">
          <div class="row">
            <div class="col-lg-9 col-md-9 col-sm-9 ProductI-left-box">
              <div class="row PI-left-title">
                <div class="col-md-8 col-sm-8 ProductI-left">
                  <label>选择参考内容：</label>
                  <select class="form-control select-style" style="width:75%;" name="id" id="referenceIndexingId" (change)="_getChangeShowContent()">
                    <!-- <option *ngFor="let v of taskTabVal" value="{{v.id}}" *ngIf="">{{v.productName}}</option> -->

                    <ng-container *ngFor="let v of taskTabVal;let i = index;" >
                      <option *ngIf="v.id == taskTabVal[initIndex].id" value="{{ i }}" selected>{{v.productName}}</option>
                      <option *ngIf="v.id != taskTabVal[initIndex].id" value="{{ i }}">{{v.productName}}</option>
                    </ng-container>

                  </select>
                </div>
                <div class="col-md-4 col-sm-4 PI-left-title-right">
                  <a href="javascript:void(0);" (click)="_refereceIndexingPrevious()" class="PI-left-title-a01"><img src="assets/indexing/upIcon.png" /><span>上一篇</span></a>
                  <a href="javascript:void(0);" (click)="_refereceIndexingNext()" class="PI-left-title-a02"><span>下一篇</span><img src="assets/indexing/lastIcon.png" /></a>
                </div>
                <div class="pi-hr"></div>
              </div>

              <div class="row" *ngIf="taskTabVal && taskTabVal.length === 0" style="height:600px;overflow: scroll;color: red;">
                找不到参考记录！
              </div>

              <ng-container *ngIf="taskType == 1 && taskTabVal && taskTabVal.length > 0">
                <div class="row" style="height:600px;overflow: scroll;">
                  <div class="col-md-12 col-sm-12 PI-left-center01" [innerHTML]="internalContent|safeStr">
                  </div>
                </div>
              </ng-container>
              <ng-container *ngIf="taskType == 0 && taskTabVal && taskTabVal.length > 0">
                <div class="row" style="height:600px;">
                  <div class="col-md-12 col-sm-12 PI-left-center01">
                      <!-- <iframe id="iframeReference" frameborder="0" width="100%" height="100%"></iframe> -->
                      <iframe id="iframeReference" *ngIf="fileFormat != 'mp3' && fileFormat != 'mp4'" frameborder="0" width="100%" height="100%"></iframe>
                      <video id="reference-video-model" *ngIf="fileFormat == 'mp4'" autostart="true" src="http://static.61read.com/videos/2018/BaoBiChiHuLi.mp4" width="100%" controls preload></video>
                      <audio id="reference-audio-model" *ngIf="fileFormat == 'mp3'" autostart="true" src="http://static.61read.com/videos/2018/BaoBiChiHuLi.mp4" style="width:100%;"  controls preload="load"></audio>
                  </div>
                </div>
              </ng-container>
              <ng-container *ngIf="taskType == 2 && taskTabVal && taskTabVal.length > 0">
                  <div class="row" style="height:600px;">
                    <div class="col-md-12 col-sm-12 PI-left-center01">
                        <app-left-keyword #leftKeyword [internalParam]='internalTablesParam' [referenceIndexing]='1'></app-left-keyword>
                    </div>
                  </div>
                </ng-container>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-3 txtTabBoxPI01">

              <ng-container *ngIf="currentRefTaskThemeTableList">
                <div class="leftShift" (click)="_leftShift()">
                  <img src="assets/indexing/upIcon.png" />
                </div>
              </ng-container>
              <div class="myTxtTabPIDiv">
                <ul id="myWinTxtTab" class="nav nav-pills myTxtTabPI">
                  <ng-container *ngFor="let themeTaskTables of currentRefTaskThemeTableList;let isFirst=first;let i = index;">
                    <!--<li class="li_bordet_right" *ngIf="themeTaskTables['canshow'] == 1">-->
                    <!--<a [ngClass]="{'active show': themeTaskTables.active}" href="javascript:void(0);" (click)="changeThemeTable(themeTaskTables.themeTableId,themeTaskTables.themeTableName,themeTaskTables.themeGroupId);"-->
                    <!--data-toggle="tab" style="padding: 0 15px 0 15px;"> {{ themeTaskTables.themeTableName | cuttingStr:4}}</a>-->
                    <!--</li>-->
                    <li class="li_bordet_right">
                      <a [ngClass]="{'active show': themeTaskTables.active}" href="#Wintab11" (click)="changeRefThemeTable(themeTaskTables.themeTableId);"
                         data-toggle="tab" style="padding: 0 15px 0 15px;" title="{{ themeTaskTables.themeTableName }}"> {{ themeTaskTables.themeTableName | cuttingStr:4}}</a>
                    </li>
                  </ng-container>

                  <li class="li_bordet_right" id="win_tab_attribute">
                    <a [ngClass]="{'active show': winAttr == true}" href="#Wintab22" (click)="_winChangAttribute()" data-toggle="tab" style="padding: 0 15px 0 15px;" title="属性">属性</a>
                  </li>
    
                  <li class="li_bordet_right" id="win_tab_time_attribute" *ngIf="taskType == 1">
                    <a [ngClass]="{'active show': winTimeAttr == true}" href="#Wintab33" (click)="_winChangTimeAttribute()" data-toggle="tab" style="padding: 0 15px 0 15px;" title="时间属性">时间属性</a>
                  </li>

                </ul>
              </div>

              <ng-container *ngIf="currentRefTaskThemeTableList">
                <div class="rightShift" (click)="_rightShift()" >
                  <img src="assets/indexing/lastIcon.png" />
                </div>
              </ng-container>

              <div id="myWinTabContent" class="tab-content TabContent01" style="height:auto;background: #F0F6F9;">
                <div id="Wintab11" class="tab-pane">
                  <div class="row" *ngIf="themeList" [ngStyle]="{'overflow':themeList.length>16 ? 'scroll':''}" style="height:612px;border: 1px solid #8ea7b4;">
                    <div class="col-lg-12 col-md-12 col-sm-12 Wintab11-table">
                      <table class="table table-striped table-bordered table-hover tableStyle">
                        <thead>
                          <tr>
                            <th>主题词</th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr *ngFor="let val of themeList">
                            <td *ngIf="taskType == 2">{{ val.relThemeWordsName }}</td>
                            <td *ngIf="taskType != 2">{{ val.themeWordsName }}</td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                  </div>
                  
                </div>
                <div id="Wintab22" class="tab-pane">
                    <div class="row" *ngIf="winAttrTabVal" style="margin-top:15px;min-height: 593px;overflow-y: scroll;">
                      <div class="container_attr">
                        <div class="input_div"  *ngFor="let val of winAttrTabVal;let isFirst=first;let i = index;">
                          <label [ngClass]="{'input_title_attr': val.inputType != 'textarea','textarea_title_attr': val.inputType == 'textarea'}">{{val.metaName}}：</label>
                          
                          <input *ngIf="val.inputType == 'text'" class="input_attributeStyle" disabled 
                          name="{{val.metaId}}" value="{{val.metaValue}}">
                  
                          <textarea *ngIf="val.inputType == 'textarea'" disabled class="textarea_textareaStyleAttr" 
                          name="{{val.metaId}}" value="{{val.metaValue}}"></textarea>

                          <input *ngIf="_isTime(val.inputType) == 'AD'" class="input_attributeStyle" disabled 
                          name="{{val.metaId}}" value="{{_isTimeValue(val.metaValue,val.inputType)}}">
                          <input *ngIf="_isTime(val.inputType) == 'BC'" class="input_attributeStyle" disabled 
                          name="{{val.metaId}}" value="{{_isTimeValue(val.metaValue,val.inputType)}}">
                  
                        </div>
                      </div>
                    </div>
                </div>
                <div id="Wintab33" class="tab-pane">
                    <div class="row" *ngIf="winTimeTabVal" [ngStyle]="{'overflow':winTimeTabVal.length>16 ? 'scroll':''}" style="height:612px;border: 1px solid #8ea7b4;">
                      <div class="col-lg-12 col-md-12 col-sm-12 Wintab11-table">
                        <table class="table table-striped table-bordered table-hover tableStyle">
                          <thead>
                            <tr>
                                <th class="w10 text-left max-w">序号</th>
                                <th class="w20 text-left max-w">属性名称 </th>
                                <th class="w20 text-left max-w">创建时间</th>
                            </tr>
                          </thead>
                          <tbody>
                            <tr *ngFor="let val of winTimeTabVal;let i = index">
                                <td class="w10 text-left max-w">{{ i + 1 }}</td>
                                <td class="w20 text-left max-w">{{ val.metaName }}</td>
                                <td class="w20 text-left max-w">{{ val.createTime | date:'yyyy-MM-dd HH:mm' }}</td>
                            </tr>
                          </tbody>
                        </table>
                      </div>
                    </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 模态框底部 -->
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
      </div>

    </div>
  </div>
</div>